<template>
  <div class="flex items-center gap-4 mt-6">
    <img :src="rightIcon" class="w-6 h-5" />
    输量与油温调节
  </div>
  <div
    class="mt-4 w-[560px] h-[280px] bg_detail rounded-lg shadow flex flex-col items-center justify-between py-8 px-4 box-border"
  >
    <div class="w-full mt-4 text-base">
      <div class="flex h-[50px]">
        <div
          class="box-border flex items-center justify-center w-48 text-center border bg_table_header"
        >
          注入油品
        </div>
        <div
          class="box-border flex items-center justify-center w-40 text-center topBorder bottomBorder rightBorder bg_table_header"
        >
          {{ oilType1 }}
        </div>
        <div
          class="box-border flex items-center justify-center w-40 text-center topBorder bottomBorder rightBorder bg_table_header"
        >
          {{ oilType2 }}
        </div>
      </div>
      <div class="flex h-[40px]">
        <div
          class="box-border flex items-center justify-center w-48 px-5 bottomBorder rightBorder leftBorder2"
        >
          调节时间/h
        </div>
        <div class="box-border flex items-center w-40 px-5 rightBorder bottomBorder">
          <el-input v-model="adjustmentTime1" class="no-style-input !text-base" />
        </div>
        <div class="box-border flex items-center w-40 px-5 rightBorder bottomBorder">
          <el-input v-model="adjustmentTime2" class="no-style-input !text-base" />
        </div>
      </div>
      <div class="flex h-[40px]">
        <div
          class="box-border flex items-center justify-center w-48 px-5 jus bottomBorder rightBorder leftBorder2"
        >
          调节后的输量(m³/h)
        </div>
        <div class="box-border flex items-center w-40 px-5 rightBorder bottomBorder">
          <el-input v-model="adjustmentFlow1" class="no-style-input !text-base" />
        </div>
        <div class="box-border flex items-center w-40 px-5 rightBorder bottomBorder">
          <el-input v-model="adjustmentFlow2" class="no-style-input !text-base" />
        </div>
      </div>
      <div class="flex h-[40px]">
        <div
          class="box-border flex items-center justify-center w-48 px-5 jus bottomBorder rightBorder leftBorder2"
        >
          调节后的油温(℃)
        </div>
        <div class="box-border flex items-center w-40 px-5 rightBorder bottomBorder">
          <el-input v-model="adjustmentTemperature1" class="no-style-input !text-base" />
        </div>
        <div class="box-border flex items-center w-40 px-5 rightBorder bottomBorder">
          <el-input v-model="adjustmentTemperature2" class="no-style-input !text-base" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import rightIcon from '@/assets/images/rightIcon.png'
const props = defineProps({
  oilType1: { type: String },
  oilType2: { type: String }
})

// 响应式数据
const adjustmentTime1 = ref('10')
const adjustmentTime2 = ref('6')
const adjustmentFlow1 = ref('260')
const adjustmentFlow2 = ref('200')
const adjustmentTemperature1 = ref('25')
const adjustmentTemperature2 = ref('30')

const validateSettings = () => {
  const adjustFields = [
    { value: adjustmentTime1.value, name: '输量调节时间' },
    { value: adjustmentTime2.value, name: '输量调节时间' },
    { value: adjustmentFlow1.value, name: '调节后的输量' },
    { value: adjustmentFlow2.value, name: '调节后的输量' },
    { value: adjustmentTemperature1.value, name: '调节后的油温' },
    { value: adjustmentTemperature2.value, name: '调节后的油温' }
  ]

  for (const field of adjustFields) {
    if (!field.value) {
      ElMessage.error(`${field.name}不能为空`)
      return false
    }
  }
  return true
}

const isFormValid = computed(() => {
  const adjustFields = [
    adjustmentTime1.value,
    adjustmentTime2.value,
    adjustmentFlow1.value,
    adjustmentFlow2.value,
    adjustmentTemperature1.value,
    adjustmentTemperature2.value
  ]
  if (!adjustFields.every((field) => field)) return false

  return true
})

const getParamsData = () => {
  return {
    T1_tj: adjustmentTime1.value,
    T2_tj: adjustmentTime2.value,
    Q1_IN_tj: adjustmentFlow1.value,
    Q2_IN_tj: adjustmentFlow2.value,
    TEM_1_tj: adjustmentTemperature1.value,
    TEM_2_tj: adjustmentTemperature2.value
  }
}

// 暴露给父组件的方法和数据
defineExpose({
  validateSettings,
  isFormValid,
  getParamsData
})
</script>

<style lang="scss" scoped>
.leftBorder {
  border-left: 1px dashed black;
  border-image: repeating-linear-gradient(
      to bottom,
      black 0,
      black 8px,
      transparent 8px,
      transparent 16px
    )
    1;
}
.border {
  border: 1px solid black;
}
.rightBorder {
  border-right: 1px solid black;
}
.bottomBorder {
  border-bottom: 1px solid black;
}
.topBorder {
  border-top: 1px solid black;
}
.leftBorder2 {
  border-left: 1px solid black;
}

.bottomDashBorder {
  border-bottom: 1px dashed rgba(53, 63, 64, 0.4);
  border-image: repeating-linear-gradient(
      to right,
      rgba(53, 63, 64, 0.4) 0,
      rgba(53, 63, 64, 0.4) 8px,
      transparent 8px,
      transparent 16px
    )
    1;
}

.shadow {
  box-shadow: 3px 3px 11px 0px rgba(0, 0, 0, 0.15);
}
:deep(.no-style-input) {
  .el-input__wrapper {
    background: none;
    box-shadow: none;
    padding: 0;
  }

  .el-input__inner {
    border: none;
    background: none;
  }
}

.line {
  background: linear-gradient(
    to right,
    rgba(53, 63, 64, 0),
    rgba(53, 63, 64, 1),
    rgba(53, 63, 64, 0)
  );
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.bg_detail {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.bg_table_header {
}

.custom-button {
  background-color: rgba(69, 122, 178, 0.18);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid rgba(69, 122, 178, 1);
  border-radius: 6px;
  color: rgba(69, 122, 178, 0.8);
  width: 140px;
  height: 40px;

  cursor: pointer;
  &:hover {
    background-color: rgba(69, 122, 178, 1);
    border: 1px solid rgba(69, 122, 178, 1);
    color: white;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 6px;
  }
}

.custom-button-not-active {
  cursor: not-allowed;
  background-color: rgba(128, 128, 128, 0.58);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid gray;
  border-radius: 6px;
  color: white;
  width: 140px;
  height: 40px;
  &:hover {
    background-color: gray;
    border: 1px solid gray;
    color: white;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 6px;
  }
}
</style>
